<template>
    <view class="nearby">
        <block>
            <mescroll ref="mescrollRef" @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback" :up="upOption">
                <search></search>
                <view class="nearby-conten margin-top">
                    <waterfall-flow :allList="dataList" iconType="address" iconNumKey="distance" @flowcall="flowBtnFn">
                    </waterfall-flow>
                </view>
            </mescroll>
        </block>
        <block v-if="locShow">
            <view class="df-cen">位置正在获取中。。。。。</view>
        </block>
    </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import search from '@/livePages/components/search.vue'
import WaterfallFlow from '@/livePages/components/waterfall-flow.vue'
export default {
	mixins: [MescrollMixin],
	name: 'Nearby',
	data() {
		return {
			locShow: true,
			nearbyObj: {
				page: 1,
				size: 10,
				la: 22.926143271743413,
				lo: 113.35860046230468
			},
			dataList: [],
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: false, // 不自动加载
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量
				},
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				},
				textNoMore: '暂无更多数据...'
			}
		}
	},
	components: {
		search,
		WaterfallFlow
	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调, 有3种处理方式:*/
		downCallback(e) {
			// #ifdef MP-WEIXIN
			if (!uni.getStorageSync('token')) {
				this.mescroll.endSuccess(0)
				return
			}
			// #endif
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调*/
		upCallback(page) {
			// #ifdef MP-WEIXIN
			if (!uni.getStorageSync('token')) {
				this.mescroll.endSuccess(0)
				return
			}
			// #endif
			this.nearbyObj.page = page.num
			this.nearbyObj.size = page.size
			// 如果是第一页需手动制空列表
			if (page.num == 1) {
				this.dataList = []
				this.$util.getLocation().then(success => {
					this.locShow = false
					this.nearbyObj.la = success.latitude
					this.nearbyObj.lo = success.longitude
					this.$request
						.getNearbyList(this.nearbyObj)
						.then(res => {
							this.dataList = this.dataList.concat(...res.data.list)
							this.mescroll.endSuccess(res.data.list.length)
							// console.log('log', this.dataList);
						})
						.catch(() => {
							// 联网失败, 结束加载
							this.mescroll.endErr()
						})
				})
			} else {
				this.$request
					.getNearbyList(this.nearbyObj)
					.then(res => {
						this.dataList = this.dataList.concat(...res.data.list)
						this.mescroll.endSuccess(res.data.list.length)
					})
					.catch(() => {
						// 联网失败, 结束加载
						this.mescroll.endErr()
					})
			}
		},
		flowBtnFn(val) {
			if (val.type === 'video') {
				this.$Router.push({
					path: '/livePages/video/video',
					query: {
						video_id: val.id
					}
				})
			}
			if (val.type === 'graphic') {
				this.$Router.push({
					path: '/publicPages/details/details',
					query: {
						content_id: val.id
					}
				})
			}
			// console.log('log', val);
		}
	},
	mounted() {
		// 获取位置
	}
}
</script>

<style lang="scss">
.nearby {
    height: 100%;
    padding: 0 22rpx;
}
</style>
